import { Color, Matrix4, Vector3, Quaternion } from 'https://unpkg.com/three/build/three.module.js';
import { initShaders, ScaleLinear, imgPromise } from '../jsm/Utils.js';
import lib from '../jsm/ThreeLib.js';
import Poly from '../jsm/Poly3.js'

window.onload = function () {

    const canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    const gl = canvas.getContext("webgl");
    //开启颜色合成,才会有透明度的感觉
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
    //开始背景遮挡
    gl.enable(gl.DEPTH_TEST);

    //初始化着色器
    initShaders(gl,
        document.querySelector("#vertexShader").innerText,
        document.querySelector("#fragmentShader1").innerText);
    lib.clearCanvas(gl, new Color("rgba(1,1,1,1)"), 1);


    let max = 1;
    let allArr = [
        -0.5, -0.8, 10, 0, 0,
        -0.5, 0.8, 10, 0, max,
        0.5, -0.8, 10, max, 0,
        0.5, 0.8, 10, max, max,
    ];
    // let allArr = [
    //     -0.5, -0.8, 10, 0, max,
    //     -0.5, 0.8, 10, max, max,
    //     0.5, -0.8, 10, 0, 0,
    //     0.5, 0.8, 10, max, 0,
    // ];

    let mm4 = new Matrix4();

    const imageJumpData = { set: 0.0, };

    let u_Mm4 = gl.getUniformLocation(gl.program, 'u_ModelMatrix')
    gl.uniformMatrix4fv(u_Mm4, false, mm4.elements)

    let poly01 = new Poly({
        gl: gl,
        arr: allArr,
        list: [
            { name: 'a_Position', size: 2, beginIndex: 0 },
            { name: 'a_PointSize', size: 1, beginIndex: 2 },
            { name: 'a_Pin', size: 2, beginIndex: 3 },
        ],
        uniforms: {
            u_Set: {
                type: 'uniform1f',
                value: imageJumpData.set,
            }
        }
    });
    // poly01.draw(["TRIANGLE_STRIP"]);



    let poly02 = new Poly({
        gl: gl,
        arr: allArr,
        list: [
            { name: 'a_Position', size: 2, beginIndex: 0 },
            { name: 'a_PointSize', size: 1, beginIndex: 2 },
            { name: 'a_Pin', size: 2, beginIndex: 3 },
        ],
        uniforms: {
            u_Set: {
                type: 'uniform1f',
                value: imageJumpData.set,
            }
        }
    });
    // poly02.draw(["TRIANGLE_STRIP"]);



    const img01 = new Image();
    img01.src = '../02-矩阵/Images/1.webp';
    const img02 = new Image();
    img02.src = '../02-矩阵/Images/2.webp';

    const textureArr = [img01, img02];


    Promise.all([
        imgPromise(img01),
        imgPromise(img02)
    ]).then(() => {

        poly01.texture = {
            'u_Sampler': {
                image: img01,
                WRAP_W: gl.CLAMP_TO_EDGE,
                WRAP_H: gl.CLAMP_TO_EDGE,
            },
        };




        poly02.texture = {
            'u_Sampler': {
                image: img02,
                WRAP_W: gl.CLAMP_TO_EDGE,
                WRAP_H: gl.CLAMP_TO_EDGE,
            },
        };



        poly02.init();
        poly02.draw(["TRIANGLE_STRIP"]);

        poly01.init();
        poly01.draw(["TRIANGLE_STRIP"]);




    });


    //修改图片
    function updateImage(images) {
        poly.texture['u_Texture1'] = {
            image: images[0],
            WRAP_W: gl.CLAMP_TO_EDGE,
            WRAP_H: gl.CLAMP_TO_EDGE,
        };
        poly.texture['u_Texture2'] = {
            image: images[1],
            WRAP_W: gl.CLAMP_TO_EDGE,
            WRAP_H: gl.CLAMP_TO_EDGE,
        };

        poly.updateTexture();
    }







};
